import React from 'react';
import './styles.less';
import { useContext } from '../../context';
import closeIcon from '../../img/close.svg';
import showDicesSelector from '../dices-selector';

export default function GreenBoard(props: any) {
  const { store } = useContext();
  const greenDice = store.dices.rockPool.find(d => d.type === 'green');
  const whiteDice = store.dices.rockPool.find(d => d.type === 'white');
  return (
    <div className="greenboard">
      {[1, 3, 6, 10, 15, 21, 28, 36, 45, 55, 66].map((i, ind) => {
        return (
          <div
            className="greenboard-point-item"
            style={{
              gridColumn: `${(ind + 1) * 2 + 1} / ${(ind + 1) * 2 + 3}`,
              gridRow: `2 / 6`,
            }}
          >
            <div className="greenboard-point-item-1">{i}</div>
          </div>
        );
      })}
      {store.greenData.map((i, ind) => {
        const greenUseable = greenDice && greenDice.value >= i[0];
        const whiteUseable = whiteDice && whiteDice.value >= i[0];
        const pre = store.greenData[ind - 1] || [0, 1];
        const useable = !i[1] && pre[1] && (greenUseable || whiteUseable);
        return (
          <div
            className={`greenboard-item ${useable ? 'dice-useable' : ''}`}
            style={{
              gridColumn: `${(ind + 1) * 2 + 1} / ${(ind + 1) * 2 + 3}`,
              gridRow: `11 / 24`,
            }}
            onClick={async () => {
              if (useable) {
                var dice: any = greenDice || whiteDice;
                if (greenUseable && whiteUseable) {
                  dice = await showDicesSelector([greenDice, whiteDice]);
                }
                dice && store.reverseChange(['greenData', ind, 1], dice);
              }
            }}
          >
            <div className="greenboard-item-1">≥{i[0]}</div>
            {i[1] ? (
              <div className="a-checked">
                <img src={closeIcon} />
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}
